<template>
  <div class="underway-container">
    <div absolute ml-20 @click="goBack()">
      <el-icon :size="25">
        <ArrowLeft></ArrowLeft>
      </el-icon>
    </div>

    <!-- 标题 -->
    <div class="title" flex-center mt-20 text-20><h2>进行中的测评</h2></div>

    <!-- 测评列表 -->
    <div class="table-list" m-20>
      <!-- 正在进行中的测评卡片 -->
      <div
        class="table-underway-card"
        v-for="item in userStore.underwayList"
        :key="item.id"
        mb-20
      >
        <TableUnderwayCard :tableMessage="item"></TableUnderwayCard>
      </div>
    </div>

    <div class="tip" flex-center text-14>
      <span>仅显示最近30天的测评</span>
    </div>
  </div>
</template>

<script setup>
import TableUnderwayCard from "./components/TableUnderwayCard.vue";
import usePsyUserStore from "../../../store/psy/psyUser";

const userStore = usePsyUserStore();

// const tableMessages = [
//   {
//     id: 1,
//     img: "https://psystatic.fenxapp.com/uploads/0/1/240110/7946df0e7e9d148d04f13e0b9edb8e3f.png?x-oss-process=image/auto-orient,1/interlace,1/resize,m_lfit,w_84",
//     name: "MBTI人格测试（48题）",
//     startTime: "7-13 19:47",
//     progressPercentage: 0.5,
//   },
//   {
//     id: 2,
//     img: "https://psystatic.fenxapp.com/uploads/0/1/240624/4b8df10c1ef590932e7a95851fbd39c9.jpg?x-oss-process=image/auto-orient,1/interlace,1/resize,m_lfit,w_84",
//     name: "自恋人格量表",
//     startTime: "7-15 10:49",
//     progressPercentage: 0.8,
//   },
// ];

const goBack = () => {
  window.history.go(-1);
};
</script>

<script>
/**
 * 正在进行中的测评
 * 负责人：唐诗轶
 */
export default {
  name: "Underway",
};
</script>

<style lang="scss" scoped>
.table-underway-card {
  cursor: pointer;
  transition: all 0.2s;
}

.table-underway-card:active {
  transform: scale(0.98);
}
</style>
